<template>
  <IndexHeader />
  <el-row class="layout">
    <el-col :span="3" class="sidebar">
      <el-menu
        active-text-color="aqua"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        unique-opened
        :router="true"
      >
        <template v-for="page in pageArr" :key="page.path">
          <el-menu-item v-if="!page.child.length" :index="page.path">
            <el-icon v-if="page.icon">
              <component :is="page.icon" />
            </el-icon>
            <span>{{ page.name }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="page.path">
            <template #title>
              <el-icon v-if="page.icon">
                <component :is="page.icon" />
              </el-icon>
              <span>{{ page.name }}</span>
            </template>
            <template v-for="child in page.child" :key="child.path">
              <el-menu-item v-if="!child.child.length" :index="child.path">
                <el-icon v-if="child.icon">
                  <component :is="child.icon" />
                </el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>

              <el-sub-menu v-else :index="child.path">
                <template #title>
                  <el-icon v-if="child.icon">
                    <component :is="child.icon" />
                  </el-icon>
                  <span>{{ child.name }}</span>
                </template>
                <el-menu-item
                  v-for="subChild in child.child"
                  :key="subChild.path"
                  :index="subChild.path"
                >
                  <el-icon v-if="subChild.icon">
                    <component :is="subChild.icon" />
                  </el-icon>
                  <span>{{ subChild.name }}</span>
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-col>

    <el-col :span="21" class="main-content">
      <router-view />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import IndexHeader from '@/public-view/IndexHeader.vue'
import { reactive, onMounted } from 'vue'

// 图标映射（按需引入）
import {
  Menu,
  Setting,
  ShoppingCart,
  House,
  User,
  Wallet,
  Paperclip,
  Goods,
  Tickets,
  CreditCard,
  Coin,
  SoldOut,
  Sell,
  Checked,
} from '@element-plus/icons-vue'

const iconMap: Record<string, any> = {
  Menu,
  Setting,
  ShoppingCart,
  House,
  User,
  Wallet,
  Paperclip,
  Goods,
  Tickets,
  CreditCard,
  Coin,
  SoldOut,
  Sell,
  Checked,
}

// 前端展示菜单结构
interface Page {
  name: string
  path: string
  child: Page[]
  icon?: string
}

const pageArr = reactive<Page[]>([])

const getMenuList = async () => {
  try {
    const raw = sessionStorage.getItem('menuTree')
    if (raw) {
      const menuTree = JSON.parse(raw)
      pageArr.splice(0, pageArr.length, ...formatMenuData(menuTree))
    } else {
      console.warn('未获取到菜单数据，请重新登录')
    }
  } catch (error) {
    console.error('菜单加载失败', error)
  }
}

const formatMenuData = (data: any[]): Page[] => {
  return data.map((item: any) => ({
    name: item.name,
    path: item.purl || item.id.toString(),
    icon: item.icon && iconMap[item.icon] ? item.icon : undefined,
    child: item.children?.length ? formatMenuData(item.children) : [],
  }))
}

onMounted(() => {
  getMenuList()
})
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  background-color: #545c64;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow: auto;
}
</style>
